<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>图灵机器人</title>

		<!-- Bootstrap -->
		<link href="dist/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/tuling.css" />
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div class="con">
			<div class="wrap clearfix">
				<div class="msg">
					<div class="top">
						<span></span>
						<p>图灵机器人</p>
					</div>
					<div class="btm">
						<p>喜欢的事</p>
						<div class="clearfix">
							<span class="col1">爱聊天</span>
							<span class="col2">见义勇为</span>
							<span class="col3">工作狂</span>
							<span class="col4">唱歌</span>
						</div>
						<p>讨厌的事</p>
						<div class="clearfix">
							<span class="col1">被冤枉</span>
							<span class="col2">无所事事</span>
							<span class="col3">没钱花</span>
							<span class="col4">吵架</span>
						</div>
					</div>
				</div>
				<div class="dialogBox">
					<div class="textArea"></div>
					<div class="writeArea clearfix">
						<input type="text" maxlength="200" />
						<span>发送</span>
					</div>
				</div>
				<div class="example">
					<ul class="clearfix">
						<li value1="你好，你是美女么？" value2="挖掘机技术哪家强？" class="li" data-toggle="modal" data-target="#myModal">
							<span class="spic1"></span>
							<p>聊天</p>
						</li>
						<li value1="讲个笑话" value2="冷笑话" data-toggle="modal" data-target="#myModal">
							<span class="spic2"></span>
							<p>笑话</p>
						</li>
						<li value1="刘亦菲的图片">
							<span class="spic3"></span>
							<p>图片</p>
						</li>
						<li value1="北京今天的天气" value2="北京今天的空气质量" data-toggle="modal" data-target="#myModal">
							<span class="spic4"></span>
							<p>天气</p>
						</li>
						<li value1="地球到月球的距离" value2="感冒应该怎么办" value3="虎皮鹦鹉吃什么" data-toggle="modal" data-target="#myModal">
							<span class="spic5"></span>
							<p>问答</p>
						</li>
						<li value1="百科周杰伦" value2="李连杰的介绍" data-toggle="modal" data-target="#myModal">
							<span class="spic6"></span>
							<p>百科</p>
						</li>
						<li value1="讲个故事" value2="讲个白雪公主的故事" data-toggle="modal" data-target="#myModal">
							<span class="spic7"></span>
							<p>故事</p>
						</li>
						<li value1="我要看新闻" value2="体育新闻" value3="周杰伦的新闻" data-toggle="modal" data-target="#myModal">
							<span class="spic8"></span>
							<p>新闻</p>
						</li>
						<li value1="红烧肉怎么做" value2="辣子鸡丁的菜谱" data-toggle="modal" data-target="#myModal">
							<span class="spic9"></span>
							<p>菜谱</p>
						</li>
						<li value1="天蝎座明天的运势" value2="现在是什么星座" value3="今年属牛的运势" data-toggle="modal" data-target="#myModal">
							<span class="spic10"></span>
							<p>星座</p>
						</li>
						<li value1="周杰伦这个名字好不好" value2="10086凶吉" data-toggle="modal" data-target="#myModal">
							<span class="spic11"></span>
							<p>凶吉</p>
						</li>
						<li value1="3乘以5等于多少" value2="25*25等多少" data-toggle="modal" data-target="#myModal">
							<span class="spic12"></span>
							<p>计算</p>
						</li>
						<li value1="顺丰快递" data-toggle="modal" data-target="#myModal">
							<span class="spic13"></span>
							<p>快递</p>
						</li>
						<li value1="明天从北京到上海的航班" data-toggle="modal" data-target="#myModal">
							<span class="spic14"></span>
							<p>飞机</p>
						</li>
						<li value1="明天从北京到石家庄的火车" data-toggle="modal" data-target="#myModal">
							<span class="spic15"></span>
							<p>列车</p>
						</li>
						<li value1="开始成语接龙" data-toggle="modal" data-target="#myModal">
							<span class="spic16"></span>
							<p>成语接龙</p>
						</li>
					</ul>
					<p class="more">
						<a href="">了解更多</a>
					</p>
				</div>
			</div>
		</div>

		<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">你可以这样问我</h4>
					</div>
					<div class="modal-body">
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="dist/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			
			//动态生成模态框内数据
			var modalBody = document.querySelector('.modal-body');
			var li = document.querySelectorAll('.example li');
			var liValue = '';
			for(var i = 0; i < li.length; i++) {
				li[i].index = i;
				li[i].onclick = function() {
					modalBody.innerHTML='';
					var attrs = li[this.index].attributes;
					for(var j = 0; j < attrs.length; j++) {
						if(attrs[j].nodeName.indexOf('value') >= 0) {
							liValue = li[this.index].getAttribute(attrs[j].nodeName);
							modalBody.innerHTML += '<a href="javascript:;" onclick="sendA(this.innerHTML);">' + liValue + '</a>';
						}
					}
				}
			}

			//选择模态框里面的数据进行发送
			var myModal = document.querySelector('#myModal');

			function sendA(str) {
				showHint(str);
				$('#myModal').modal('hide');
				modalBody.innerHTML = '';
			}

			//发送
			var wAreaSpan = document.querySelector('.writeArea span');
			var wInput = document.querySelector('.writeArea input');
			var textArea = document.querySelector('.textArea');
			wAreaSpan.onclick = function() {
				if(wInput.value == '' || wInput.value == null) {
					alert('发送的内容不能为空');
				} else {
					showHint(wInput.value);
					wInput.value = '';
				}
			}
			
			
			function showHint(str) {
				var html = '<div class="mWord clearfix"><span></span><p><i></i>' + str + '</p></div>';
				textArea.innerHTML += html;
				send(str);
			}

			function send(str) {
				//第一步 创建对象
				var xhr;
				if(window.XMLHttpRequest) {
					xhr = new XMLHttpRequest();
				} else {
					xhr = new ArchiveRequest('Microsoft.XMLHTTP');
				}
				var url = 'http://www.tuling123.com/openapi/api?key=58293807907748a5b4bda52e058943b2';
				url = url + '&info=' + str;
				url = url + '&userid=1234';
				xhr.open('POST', url, true);
				xhr.send();
				xhr.onreadystatechange = function() {
					if(xhr.readyState == 4 && xhr.status == 200) {
						var mydata = JSON.parse(xhr.responseText)['text'];
						var html = '<div class="rotWord clearfix"><span></span><p><i></i>' + mydata + '</p></div>';
						textArea.innerHTML += html;
						textArea.scrollTop = textArea.scrollHeight;
					}
				}
			}
		</script>
	</body>

</html>